<template>
  <div  class="wrapper">
    <div>
      <FormPanel
        ref="from"
        :list="initForm"
        :cols="3"
        :formType="value.type"
        :labelWidth="120"
        :isSubmitBtn="false"
        :collapse="false"
        @formChange="changeHandle"
      />
    </div>

    <div v-if="this.isShow">
      <FilterTable
        height="auto"
        ref="tableQuestion"
        :columns="questionColumns"
        :isSelectColumn="isSelectColumn"
        selectionType="single"
        :isMemoryPagination="true"
        :onSyncTableData="syncPjFun"
        :datakey="'records'"
        :isToperInfo="false"
        :onColumnsChange="questionColumns => (this.questionColumns = questionColumns)"
        columnsRef="notification_maintain_info_02">

        <template slot="controls">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addPositionFun()">添加问题选项</el-button>
        </template>
      </FilterTable>
    </div>

    <div class="dialogBottmView">
      <el-button @click="closeDialog('closeDialog')">关 闭</el-button>
      <el-button :loading="loadingFlag" @click="saveDialog()" type="primary">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import {getQuestionByDm,savePositionInfo} from '@/api/questionManage/question';
export default {
  name: "questionInfo",
  mixins: [dictionary],
  props:{
    value: {
      type: Object,
      data: Object,
      required: true
    },
  },
  data() {
    return {
      type: this.value.type,
      initForm : this.initFormFun(),
      questionColumns: this.creatHeaderPartRoleColumns(),
      partList: [],
      isSelectColumn: false,
      formData:{},
      returnID: '',
      saveData: {
        editType: '',
        xxList: []
      },
      djzt: null,
      isShow: true,
      loadingFlag:false,
    };
  },
  created() {
    this.init(this.value.data)
  },
  methods: {
    init(data) {
      if(this.type==='edit'){
        this.initForm.forEach(x => {
          x.initialValue = data[x.fieldName];
        });
        var initdata = {
          wxwtdm: data.wxwtdm,
        }
        if(data.wxwtlx === 50181003){
          this.isShow = false
        } else {
          getQuestionByDm(initdata).then(response => {
            console.info(111)
            console.info(response)
            var list = response.data.records
            if(response.resultCode === 200){
              this.$nextTick(()=>{
                this.$refs.tableQuestion.EXECUTE_INSERT(list)
              })
            }
          })
        }
      }
    },
    initFormFun(){
      return [
        {
          type: 'INPUT',
          label: '问题代码',
          fieldName: 'wxwtdm',
          disabled: this.value.type === 'edit',
          rules: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }]
        },
        {
          type: 'SELECT',
          label: '启用标记',
          fieldName: 'wxsfqy',
          placeholder: '请选择',
          clearable: false,
          initialValue: 10031001,
          itemList: this.createDictList('1003')
        },
        {
          type: 'SELECT',
          label: '问题类型',
          fieldName: 'wxwtlx',
          placeholder: '请选择',
          clearable: false,
          initialValue: 50181001,
          itemList: this.createDictList('5018'),
          change: val => {
            this.lxChange(val);
          }
        },
        {
          type: 'SELECT',
          label: '问题适用',
          fieldName: 'wxwjsy',
          placeholder: '请选择',
          clearable: false,
          initialValue: 50191001,
          itemList: this.createDictList('5019'),
          rules: [{
            required: true,
            message: '必填',
            trigger: 'blur'
          }]
        },
        {
          type: 'TEXT_AREA',
          label: '问题内容',
          fieldName: 'wxwtnr',
          placeholder: '请输入',
          selfCols:2,
          initialValue: '',
          rules: [{
            required: true,
            message: '必填',
            trigger: 'blur'
          }]
        }
      ]
    },
    creatHeaderPartRoleColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 50,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.deletePart(props.row,props.$index)}>
                  删除
                </el-button>
              </div>
            );
          }
        },
        {
          title: '顺序',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '问题选项',
          dataIndex: 'wxwtxx',
          filterType: 'input',
          editRequired: true,
          sorter: true,
          editable: true,
          placeholder: '请填写问题选项...',
          rules: [{ required: true, message: '请填写问题选项', trigger: 'blur' }]
        }
      ];
    },
    changeHandle(val){
      this.saveData=val
    },
    //保存
    async saveDialog() {
      // this.$refs.from.SUBMIT_FORM();
      let [err, data] = await this.$refs.from.GET_FORM_DATA();
      if(err) return;
      var err1 = null
      console.info(data)
      if(data.wxwtlx === 50181001 || data.wxwtlx === 50181002){
        err1 = this.$refs.tableQuestion.GET_REQUIRED_ERROR();
        console.info(33)
        console.info(err1)
        if(err1) return;
        if(this.saveData.xxList.length<1) {
          this.$notify.error({title: '提示信息',message:'单选或多选题问题选项需大于0!'});
          return
        }
      }

      if (this.saveData) {
        this.saveData.editType = this.type
        this.saveData.wxwtdm = data.wxwtdm
        this.saveData.wxsfqy = data.wxsfqy
        this.saveData.wxwtnr = data.wxwtnr
        this.saveData.wxwtlx = data.wxwtlx
        this.saveData.wxwjsy = data.wxwjsy
        this.loadingFlag = true;
        console.info(444)
        console.info(this.saveData)
        let res = await savePositionInfo(this.saveData)
        console.info(res)
        if (res.data.status === 'success') {
          this.$notify.success({title: '提示信息',message:'保存成功!'});
          this.loadingFlag = false;
          this.closeDialog('refresh')
        } else {
          this.$notify.error({title: '提示信息',message:res.data.message||'保存失败!'});
          this.loadingFlag = false;
        }
      }
    },
    //取消操作
    closeDialog(type) {
      this.$emit('close', type);
    },
    syncPjFun(details){
      this.saveData.xxList = details
    },
    addPositionFun() {
      var p = {
        wxwtxx: '',
        wxwtid: null
      }
      this.$refs.tableQuestion.EXECUTE_INSERT(p)
    },
    deletePart(row,index) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.$refs.tableQuestion.EXECUTE_DELETE([row])
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    lxChange(val) {
      this.isShow = false
      // 单选 多选
      if(val === 50181001 || val === 50181002){
        this.isShow = true
      }
      // if (this.formData.details.length>0) {
      //   this.$refs.tablePeij.SET_TABLE_DATA([]) //改变类型就清空配件明细
      //   // this.$confirm('切换订单类型将导致配件明细会被清空！').then(r => {
      //   //   this.$refs.tablePeij.SET_TABLE_DATA([]) //改变类型就清空配件明细
      //   // })
      // }
    },
  }
};
</script>
<style scoped>
.wrapper {
  height: calc(100vh - 110px);
}
</style>
